<template>
  <el-row>

    <!--  查询条件与地图  -->
    <el-row :gutter="15">

      <!--   查询条件   -->
      <el-col :span="8">
        <Elcard style="height: 25vh">
          <div slot="header">
            <span>查询条件</span>
            <el-button
                @click="resettingSelectOption"
                style="float: right"
                type="primary"
                size="mini">
              重置查询条件
            </el-button>
          </div>

          <SelectForm
              @resetSelectForm="resettingTable"
              @selectChange="selectChange"
              @getOptionSuccess="getOptionSuccess"
              :Reset="resettingFlag"
          />

        </Elcard>
      </el-col>

      <!--   地图   -->
      <el-col :span="16">
        <ElCard style="height: 30vh">
          <div
              slot="header">
            <span>工作路径在此查看</span>

            <el-button
                @click="isMapVisiable=true"
                style="float: right"
                type="primary"
                size="mini">放大
            </el-button>

            <el-switch
                v-model="showSatelite"
                inactive-text="卫星图"
                style="float: right;margin-right: .5vw"
            >
            </el-switch>

          </div>
          <el-row style="height: 20vh">
            <Map
                :workPath="workPath"
                :workMobileName="currMobileName"
                :mapInfo="mapSetting"
                :showSatelite="showSatelite"
            ></Map>
          </el-row>
        </ElCard>
      </el-col>
    </el-row>

    <!--  表格  -->
    <el-row
        style="margin-top: 1vh">

      <ElCard style="height: auto">
        <div slot="header">
          <span>终端名单</span>
          <el-button
              size="mini"
              type="primary"
              style="float: right"
              @click="addMobile">添加
          </el-button>
        </div>
        <Table
            :selectForm="selectForm"
            :districtOptions="districtOption"
            :flushTable="flushTable"
            @getWorkPath="getWorkPath"
        />
      </ElCard>
    </el-row>

    <!---------------------  弹窗  ------------------>

    <!--  地图  -->
    <Dialog
        :visiable="isMapVisiable"
        @close="isMapVisiable=false"
        :info="{title:'查看地图',width:'75%'}"
    >
      <div slot="header">
        <span>查看地图</span>
        <el-switch
            v-model="showSateliteDialog"
            inactive-text="卫星图"
            style="float: right;margin-right: 2vw"
        >
        </el-switch>
      </div>

      <el-row
          style="height: 65vh">
        <Map
            :workPath="workPath"
            :workMobileName="currMobileName"
            :mapInfo="mapSetting"
            :showSatelite="showSateliteDialog"
        ></Map>
      </el-row>
    </Dialog>

    <!--  频点类型  -->
    <Dialog
        :visiable="addMobileVisiable"
        @close="addMobileVisiable=false"
        :info="{title:'添加终端',width:'25%'}"
        top="20vh"
    >
      <addMobileForm
          :districtOptions="districtOption"
          @addSuccess="addSuccess"
      />
    </Dialog>

  </el-row>
</template>

<script>
// ---------------- element-ui ------------------
import Elcard from "../../../../components/element-ui/elCard"
import Dialog from "../../../../components/element-ui/dialog"
// ---------------- AMap ---------------------
import Map from "../../../../components/AMap/views/map-path"
import {mapSetting} from "../../../../components/AMap/map_setting";
// --------------- 自定义组件 ------------------
import SelectForm from "./mobileManage-cpt/selectForm"
import Table from "./mobileManage-cpt/table"
import addMobileForm from "./mobileManage-cpt/addMobileForm";

export default {
  components: {
    Elcard, Dialog, SelectForm, Map, Table, addMobileForm
  },
  computed: {

    /**
     * 地图配置
     * */
    mapSetting: function () {
      return mapSetting("workPath")
    }
  },
  methods: {
    // ---------------- 功能 -------------------
    /**
     * 重置查询表单
     * */
    resettingSelectOption: function () {
      this.resettingFlag = !this.resettingFlag;
      this.resettingTable()
    },

    /**
     * 添加新手机
     */
    addMobile: function () {
      this.addMobileVisiable = true;
    },

    /**
     * 获取所属地区成功
     * @param val
     */
    getOptionSuccess: function (val) {
      this.districtOption = val.taizhan;
      this.$emit("getOptionSuccess", val);
    },

    /**
     * 添加手机成功,刷新表格
     */
    addSuccess: function () {
      this.flushTable = !this.flushTable;
      this.addMobileVisiable = false;
    },

    /**
     * 获取工作路径
     * @param val
     * @returns {number}
     */
    getWorkPath: function (val) {
      this.workPath = val.path;
      this.currMobileName = val.name;
    },

    /**
     * 选择地区成功
     * @param val
     */
    selectChange: function (val) {
      this.workPath = [];
      this.selectForm = val;
    },

    /**
     * 重置查询项 刷新表格
     */
    resettingTable: function () {
      this.workPath = [];
      this.flushTable = !this.flushTable;
    }
  },
  data() {
    return {
      showSatelite: true,
      showSateliteDialog: true,
      // ----------- 弹窗 -------------
      isMapVisiable: false,
      addMobileVisiable: false,
      // ---------- 查询表单 ------------
      resettingFlag: false,
      districtOption: [],
      flushTable: false,
      selectForm: {},
      //   ----------- 功能 ------------
      workPath: [],
      currMobileName: undefined
    }
  }
}
</script>

<style scoped>

</style>